<style>
    .content-preview{width:10rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
</style>

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        管理
        <small>列表</small>
    </h1>
</section>
<!-- /.Content Header -->


<!-- Main content -->
<section class="content" id="lives-stock-recommend-app">
    <div class="row">
        <div class="col-md-4">
            <a v-show="show.list" class="btn btn-default" @click="getList">刷新</a>
            <a v-show="show.list" class="btn btn-info" @click="add">添加</a>
            <a v-show="show.edit" class="btn btn-danger" @click="showToggle('list')">关闭</a>
        </div>
        <div class="col-md-8">
            <div class="col-md-2">
                <select class="form-control" v-model="page.cid">
                    <option value="0">全部频道</option>
                    <option v-for="t in channels" :value="t.id">{{t.name}}</option>
                </select>
            </div>
        </div>
    </div>

    <div class="row" v-show="show.list">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>频道</th>
                    <th>股票代码</th>
                    <th>股票名称</th>
                    <th>股票涨幅</th>
                    <th>布局理由</th>
                    <th>时间</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.channel_name}}</td>
                    <td>{{item.stock_code}}</td>
                    <td>{{item.stock_name}}</td>
                    <td>{{item.stock_raise}}%</td>
                    <td>{{item.stock_remark}}</td>
                    <td>{{item.created}}</td>
                    <td>
                        <a class="btn btn-info btn-xs" @click="edit(item)">编辑</a>
                        <a class="btn btn-danger btn-xs" @click="del(item)">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <page :rows="page.rows" :last="pageLast" v-model="page.page"></page>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row" v-show="show.edit">
        <div class="col-md-4 col-md-offset-2">
            <h3>编辑</h3>
            <div class="form" role="form">

                <div class="form-group">
                    <label>频道：</label>
                    <select class="form-control" v-model="edit_item.live_channel_id">
                        <option v-for="t in channels" :value="t.id">{{t.name}}</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>股票代码：</label>
                    <input class="form-control" v-model="edit_item.stock_code">
                </div>

                <div class="form-group">
                    <label>股票名称：</label>
                    <input class="form-control" v-model="edit_item.stock_name">
                </div>

                <div class="form-group">
                    <label>股票涨幅：</label>
                    <input class="form-control" v-model="edit_item.stock_raise">
                </div>

                <div class="form-group">
                    <label>布局理由：</label>
                    <textarea class="form-control" v-model="edit_item.stock_remark"></textarea>
                </div>

                <div class="form-group">
                    <a class="btn btn-primary" @click="save">发表</a>
                    <a class="btn btn-default" @click="showToggle('list')">关闭</a>
                </div>
            </div>
        </div>
    </div>

</section>
<!-- /.content -->

<script>
    var lives_stock_recommend_app = new Vue({
        el: '#lives-stock-recommend-app',
        data: {
            list: [],
            edit_item: {},
            channels: [],
            page: {
                page: 1,
                rows: 10,
                cid: 0,
                tid: 0
            },
            pageLast: 0,
            show: {
                list: true,
                edit: false
            }
        },
        created: function () {
            this.getChannels();
            this.getList();
        },
        methods: {
            getList: function () {
                ajax({
                    uri: '/lives/stock_recommend',
                    type: 'GET',
                    data: this.page,
                    success: function (resp) {
                        this.list = resp.data;
                        this.pageLast = resp.last_page;
                    }.bind(this)
                })
            },
            getChannels: function () {
                ajax({
                    uri: '/lives/channel_list',
                    success: function (resp) {
                        this.channels = resp.data;
                    }.bind(this)
                });
            },
            showToggle: function (prop) {
                for (var p in this.show) {
                    this.show[p] = (p === prop)
                }
            },
            add: function () {
                this.edit_item = {live_channel_id: this.edit_item.live_channel_id};
                this.showToggle('edit');
            },
            edit: function (item) {
                this.edit_item = item;
                this.showToggle('edit');
            },
            save: function () {
                var item = this.edit_item;
//                if (!item.stock_code || !item.teacher_id || !item.live_channel_id) {
//                    alert("请完善资料");return;
//                }
                ajax({
                    uri: '/lives/stock_recommend',
                    type: 'POST',
                    data: item,
                    success: function (resp) {
                        this.getList();
                        this.showToggle('list');
                    }.bind(this)
                })
            },
            del: function (item) {
                if (confirm('确定删除吗？') === false) return;
                ajax({
                    uri: '/lives/stock_recommend',
                    type: 'DELETE',
                    data: {id: item.id},
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            }
        },
        watch: {
            page: {
                handler: function(curVal, oldVal) {
                    this.getList();
                },
                deep: true
            }
        }
    })
</script>